<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-10-14 14:48:36
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-12-07 09:58:56
 * @FilePath: /hr_new_vue3/src/views/Management/Organization/OrganizationManagement/PhotoWall/Components/Wall/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%
-->
<!-- 照片墙 -->
<template>
  <div style="width: 100%">
    <a-space>
      <a-input-search
        v-model="searchVal"
        placeholder="请输入员工编号或姓名"
        :style="{
          width: '220px'
        }"
        search-button
        @search="onSearch"
        @press-enter="onSearch"
      >
        <icon-search />
      </a-input-search>
      <a-space>
        显示模式：
        <a-select @change="change" v-model="type" :style="{ width: '100px' }">
          <a-option :value="1">平铺</a-option>
          <a-option :value="2">层级</a-option>
        </a-select>
      </a-space>
      <a-space>
        显示设置：
        <a-select multiple v-model="selectData" :max-tag-count="4">
          <a-option disabled :value="1">头像</a-option>
          <a-option disabled :value="2">姓名</a-option>
          <a-option disabled :value="3">职位</a-option>
          <a-option :value="4">部门</a-option>
          <a-option :value="5">职级</a-option>
          <a-option :value="6">手机号码</a-option>
          <a-option :value="7">电子邮箱</a-option>
          <a-option :value="8">办公电话</a-option>
          <a-option :value="9">办公地址</a-option>
        </a-select>
      </a-space>
    </a-space>
    <a-divider :size="2" style="width: 100%" />
    <a-scrollbar style="height: 600px; width: 1200px; overflow: auto">
      <template v-if="photoData?.length > 0">
        <section class="wrap" v-if="type === 1">
          <div v-for="item in photoData" :key="item.id">
            <PhotoItem :photoData="item" :selectData="selectData" />
          </div>
        </section>
        <section style="width: 100%; overflow-x: auto" v-else-if="type === 2">
          <div
            class="wrap level"
            v-for="(item, index) in photoData"
            :key="item.id"
          >
            <template
              v-for="ele in photoData[photoData.length - 1 - index].peoples"
              :key="ele.id"
            >
              <PhotoItem :photoData="ele" :selectData="selectData" />
            </template>
          </div>
        </section>
      </template>
      <section class="no-data" v-else>
        <h2>暂无数据</h2>
      </section>
    </a-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import {
  GetOrganizationList,
  GetPhotoWall,
  GetPhotoWallGroup
} from '@/apis/management/organization/organizationManagement';
import PhotoItem from '../PhotoItem/index.vue';
import mitter from '@/utils/mitt';

let photoData = ref<any[]>([]); // 照片数据
let searchVal = ref();
const type = ref(1);
let id = ref(0),
  typeName = ref(''),
  selectData = ref([1, 2, 3, 4, 5, 6, 7, 8, 9]);

let organizationList = ref([]);
const getOrganizationListData = async () => {
  organizationList.value = await GetOrganizationList({});
};
const change = () => {
  getData();
};
const getData = async () => {
  try {
    if (type.value === 1) {
      photoData.value = await GetPhotoWall({
        id: id.value !== 0 ? id.value : organizationList.value[0]?.id,
        typeName:
          typeName.value !== ''
            ? typeName.value
            : organizationList.value[0]?.node,
        name: searchVal.value
      });
    } else if (type.value === 2) {
      photoData.value = await GetPhotoWallGroup({
        id: id.value !== 0 ? id.value : organizationList.value[0]?.id,
        typeName:
          typeName.value !== ''
            ? typeName.value
            : organizationList.value[0]?.node,
        name: searchVal.value
      });
    }
  } catch (error: unknown) {
    console.log(error);
  }
};
watchEffect(() => {
  mitter.on('selectTree', (res: any) => {
    id.value = res.id;
    typeName.value = res.node;
    getData();
  });
});

onMounted(async () => {
  await getOrganizationListData();
  getData();
});

const onSearch = () => {
  getData();
};

const goDetail = () => {
  console.log('====================================');
  console.log(324);
  console.log('====================================');
};
</script>

<style scoped lang="less">
.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
}
.level {
  justify-content: center;
  overflow-x: auto;
  flex-wrap: nowrap;
  margin-bottom: 20px;
}
.no-data {
  text-align: center;
}
</style>
